import { Contact } from "../Messenger/interface";
import { initialState, messengerReducer } from "./reducer";
import ContactList from "../Messenger/ContactList";
import Chat from "../Messenger/Chat";
import useReducer from "./useReducer";

const contacts: Contact[] = [
  { id: 0, name: "Taylor", email: "taylor@mail.com" },
  { id: 1, name: "Alice", email: "alice@mail.com" },
  { id: 2, name: "Bob", email: "bob@mail.com" }
];

function Messenger() {
  const [state, dispatch] = useReducer(messengerReducer, initialState);
  const message = state.messages[state.selectedId];
  const contact = contacts.find(c => c.id === state.selectedId);

  return (
    <div>
      <ContactList contacts={contacts} selectedId={state.selectedId} dispatch={dispatch} />
      <Chat key={contact!.id} message={message} contact={contact!} dispatch={dispatch} />
    </div>
  );
}

export default Messenger;
